<template>
    <SysDialog :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
        @onClose="onClose" @onConfirm="commit">
        <template v-slot:content>
            <el-form :model="addModel" ref="addFormRef" label-width="90px" :inline="false"
                size="default">
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="customerNum" label="编号">
                            <el-input v-model="addModel.customerNum"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="unit" label="单位名称">
                            <el-input v-model="addModel.unit"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="area" label="所属区域">
                            <el-input v-model="addModel.area"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="industry" label="所属行业">
                            <el-input v-model="addModel.industry"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="companyAddress" label="公司地址">
                            <el-input v-model="addModel.companyAddress"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="region" label="地区">
                            <el-input v-model="addModel.region"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="BuyerAttributes" label="买方属性">
                            <el-input v-model="addModel.BuyerAttributes"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="orderRepresentative" label="订货代表">
                            <el-input  v-model="addModel.orderRepresentative"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="6" :offset="0">
                        <el-form-item prop="billingTelephone" label="开票电话">
                            <el-input v-model="addModel.billingTelephone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <el-form-item prop="phone" label="联系电话">
                            <el-input v-model="addModel.phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <el-form-item prop="fax" label="传真">
                            <el-input v-model="addModel.fax"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <el-form-item prop="postCode" label="邮编">
                            <el-input v-model="addModel.postCode"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="invoicingAddresses" label="开票地址">
                            <el-input v-model="addModel.invoicingAddresses"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="issuingBanks" label="开票银行">
                            <el-input    v-model="addModel.issuingBanks"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="BuyerAtbankAccounttributes" label="银行账号">
                            <el-input v-model="addModel.bankAccount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="taxNumber" label="税号">
                            <el-input   v-model="addModel.taxNumber"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item prop="remark" label="备注">
                     <textarea  rows="5" cols="100"></textarea>
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="qualityRating" label="信用等级">
                            <el-input v-model="addModel.qualityRating"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="amountOwed" label="欠款金额">
                            <el-input  v-model="addModel.amountOwed"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        </template>
    </SysDialog>
</template>

<script setup lang="ts">

import SysDialog from '@/components/SysDialog.vue'
import useDialog from '@/hooks/useDialog';
import { nextTick, reactive, ref } from 'vue';
import { UserModel } from '@/api/user/UserModel';
import { ElMessage, FormInstance } from 'element-plus';
import { addUserApi, editUserApi, getListApi } from '@/api/user';
import { EditType, Title } from '@/type/BaseType';
const { dialog, onClose, onConfirm, onShow } = useDialog()    
const show = (type: string, row?: UserModel) => {
    
    type == EditType.ADD ? dialog.title = Title.ADD : dialog.title = Title.EDIT
    dialog.height = 500
    dialog.width = 1000
    dialog.visible = true

    if (row) {
        nextTick(() => {
            Object.assign(addModel, row)
            console.log('addModel:', addModel);
        })
    }


    addFormRef.value?.resetFields()

    addModel.type = type;


};

defineExpose({
    show
})

const addModel = reactive<UserModel>({
    type: '',
    id: '',
    customerNum: '',
    unit: '',
    area: '',
    industry: '',
    region: '',
    customerAttributes: '',
    orderRepresentative:'',
    creditRating: '',
    companyAddress: '',
    BuyerAttributes: '',
    billingTelephone: '',
    phone: '',
    fax: '',
    postCode: '',
    invoicingAddresses: '',
    issuingBanks: '',
    bankAccount: '',
    taxNumber: '',
    remark: '',
    qualityRating: '',
    amountOwed: '',
})

const addFormRef = ref<FormInstance>()


const emists = defineEmits(['onFresh'])  


const commit = () => {
    addFormRef.value?.validate(async (valid) => {
        if (valid) {
            let res = null;
            if (addModel.type == EditType.ADD) {
                res = await addUserApi(addModel);
            } else {
                res = await editUserApi(addModel);
            }
            console.log(res)
            if (res && res.code == 200) {
                ElMessage.success(res.msg)
                emists('onFresh')
                onClose()
            }
        }
    })
}
</script>

<style scoped></style>